<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1{
            width: 400px;
            height: 200px;
        }
    </style>
         <!-- 1.引入jQuery UI的css文件 -->
        <link rel="stylesheet" href="jquery-ui-1.12.1.custom\jquery-ui.css">
        
         <!-- //2.引入jQuery 的js文件 -->
        <script src="jquery-2.0.0.min.js"></script>

         <!-- //3.引入jQuery UI的js文件 -->
        <script src="jquery-ui-1.12.1.custom\jquery-ui.js"></script>
         <!-- //4.查找和复制UI 中的某个功能的所有的代码（html，css，js） -->

         <!-- //5.测试和使用 -->
         <script>

             //页面加载的代码先写上
             $(function(){
                $( "#tabs" ).tabs();

             })
         </script>
</head>
<body>
    <div id="div1">
        <!-- Tabs -->
        <h2 class="demoHeaders">选项卡</h2>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">oen</a></li>
                <li><a href="#tabs-2">too</a></li>
                <li><a href="#tabs-3">three</a></li>
            </ul>
            <div id="tabs-1">123456</div>
            <div id="tabs-2">56789</div>
            <div id="tabs-3">12346</div>
        </div>
    </div>
    

    
</body>
</html>